<template>
  <div class="search-popup">
    <!--搜索-->
    <div class="search-body">
      <van-search v-model="searchVal" show-action :placeholder="placeholderVal" @search="onSearch" @cancel="onCancel" @input="onInput" />
    </div>
    <!--搜索历史和热门-->
    <SearchHistoryHot v-if="isShow === 1" :historyListData="historyListData" :hotListData="hotListData" @tagClick="tagClick" />
    <!--搜索联想建议-->
    <SearchSuggestion v-if="isShow === 2" :suggestionListData="suggestionListData" @cellClick="tagClick" />
    <!--搜索结果-->
    <SearchResults v-if="isShow === 3" :filterCategory="filterCategory" :goodsList="goodsList" @priceChange="priceChange" @categoryChange="categoryChange" />
  </div>
</template>

<script>
// 加载搜索历史热门组件
import SearchHistoryHot from '@/components/SearchHistoryHot/SearchHistoryHot.vue'
// 加载搜索联想组件
import SearchSuggestion from '@/components/SearchSuggestion/SearchSuggestion.vue'
// 加载搜索结果
import SearchResults from '@/components/SearchResults/SearchResults.vue'
// 加载搜索请求接口
import { GetSearchHistoryHot, GetSearchSuggestion, GetGoodsListData } from '@/request/api'
export default {
  name: 'SearchPopup',
  components: {
    SearchHistoryHot,
    SearchSuggestion,
    SearchResults
  },
  data () {
    return {
      searchVal: '',
      placeholderVal: '请输入搜索关键词',
      isShow: 1, // 1表示显示搜索历史记录和热门搜索组件 2表示搜索联想
      historyListData: [], // 搜索历史记录
      hotListData: [], // 热门搜索
      suggestionListData: [], // 搜索联想
      filterCategory: [], // 搜索结果分类
      goodsList: [], // 搜索结果列表
      order: 'asc', // 价格排序（由高到低或者由低到高）
      categoryId: 0, // 分类ID
      sort: 'id' // 默认搜索方式，是ID或者是price
    }
  },
  created () {
    // 搜索历史和热门
    GetSearchHistoryHot().then(res => {
      // if (res.data.errno === 0) {
      // console.log(res.data)
      // }
      // console.log(res)
      // 搜索提示
      this.placeholderVal = res.data.defaultKeyword.keyword
      // 搜索历史记录
      this.historyListData = res.data.historyKeywordList
      // 热门搜索
      this.hotListData = res.data.hotKeywordList
    })
  },
  methods: {
    // 历史记录搜索
    tagClick (val) {
      // 搜索框文字
      this.searchVal = val
      // 把关键词传给它
      this.onSearch(val)
    },
    // 价格排序
    priceChange (value) {
      // value是asc或者是desc
      this.order = value
      // 以price价格方式搜索
      this.sort = 'price'
      // 发送搜索请求
      this.onSearch(this.searchVal)
    },
    // 分类排序
    categoryChange (value) {
      // 先修改ID，然后再发送请求
      this.categoryId = value
      // 发送搜索请求
      this.onSearch(this.searchVal)
    },
    // 发送搜索请求
    onSearch (val) {
      // onSearch是用户回车搜索的时候执行，val就是用户输入的值
      // console.log(val)
      // 把搜索结果组件显示
      this.isShow = 3
      // 传keyword 内容赋值
      GetGoodsListData({
        keyword: val,
        page: 1,
        size: 10,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then(res => {
        // console.log(res.data)
        // 分类赋值
        // this.filterCategory = res.data.filterCategory
        // 列表赋值
        // this.goodsList = res.data.goodsList
        // 直接解构赋值的写法
        // let { filterCategory, goodsList } = res.data
        // 替换后台字段，把name替换成text，把id替换成value
        const newArr = JSON.parse(JSON.stringify(res.data.filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
        this.filterCategory = newArr
        this.goodsList = res.data.goodsList
      })
    },
    onCancel () {
      // 用户点击了取消
      console.log('onCancel')
      this.$router.go(-1)
    },
    // 搜索联想建议
    onInput (val) {
      // 发起请求，获取实时搜索联想文本提示的数据列表
      // console.log(val)
      // 把搜索联想组件显示
      this.isShow = 2
      // 传keyword 列表赋值
      GetSearchSuggestion({ keyword: val }).then(res => {
        // console.log(res)
        this.suggestionListData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-popup{
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 15;
  background-color: #eee;
  overflow: hidden;
}
</style>
